<template>
  <div class="box">
    <img class="bgImg" src="@/assets/images/404.png" alt="" />
    <h2>欢迎来到第三世界 我的小朋友</h2>
    <div class="home">
      <span>回去吧！这里不属于您</span>
      <button class="btn"></button>
      <i @click="goHome">穿梭门</i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
let $router = useRouter()
const goHome = () => {
  $router.push('/home')
}
</script>

<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  background-color: #7395ff;
  text-align: center;
  color: #fff;

  .bgImg {
    width: 520px;
    margin-top: 80px;
    margin-left: -30px;
  }

  .gif {
    height: 170px;
  }

  h2 {
    font-size: 50px;
  }

  h3 {
    font-size: 30px;
    margin-top: 50px;
  }

  .end {
    font-size: 20px;
    margin-top: 50px;
  }

  .note {
    display: inline-block;
    position: relative;
    width: 30px;
    margin-left: 15px;
    top: 8px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#dbfbff 0 0);
    background:
      var(--c) 0% 50%,
      var(--c) 50% 50%,
      var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: l1-5604d8fb 1s infinite linear;
  }
  .Countdown {
    font-size: 60px;
    margin-top: 30px;
  }

  .footerBtn {
    margin-top: 8px;
  }

  .home {
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: inline-block;
      font-size: 20px;
      margin-top: 80px;
    }

    .btn {
      width: 80px;
      height: 32px;
      margin-left: 20px;
      margin-top: 80px;
      background-color: #64e0fe;
      border: 1px solid #c5ddff;
      border-radius: 4px;
      animation-name: shadowAnima;
      animation-duration: 1.3s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }

    i {
      margin-top: 80px;
      margin-left: -63px;
      z-index: 99;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .Countdown2 {
      margin-left: 33px;
    }
  }
}

@keyframes l1 {
  0% {
    background-size:
      20% 100%,
      20% 100%,
      20% 100%;
  }

  33% {
    background-size:
      20% 10%,
      20% 100%,
      20% 100%;
  }

  50% {
    background-size:
      20% 100%,
      20% 10%,
      20% 100%;
  }

  66% {
    background-size:
      20% 100%,
      20% 100%,
      20% 10%;
  }

  to {
    background-size:
      20% 100%,
      20% 100%,
      20% 100%;
  }
}

@keyframes shadowAnima {
  0% {
    scale: 1;
    box-shadow: 0 0 #e4fcff;
  }

  to {
    scale: 1.2;
    box-shadow: 0 0 70px #e4fcff;
  }
}
</style>
